<!--
margin负值的运用
    1）现象
        边框不会合并，所以（1+1=2）相邻边框会显得更粗
    2）解决
        浮动后，再设置负值，使得边框内嵌到前一个的里面
    3）疑惑
        都设置负值，难道不会“平行”移动同一个负值距离？从而导致不能内嵌成功呢？答：会内嵌成功。
        因为每个html标签都是重新渲染css样式的，如下
            某个元素，先浮动【紧紧贴边】，然后移动99距离，
            下一个元素，也是先浮动【紧紧贴边】，然后移动99距离，
            同理，其它所有元素都是先浮动【紧紧贴边】后，才移动99距离的。
    4）内嵌引起问题
        光标悬浮时，被覆盖的边框不能显示出来，解决如下
        有定位时
            直接设置叠放次序更高（z-index）
        没定位时
            先加相对定位（仍需占用位置，所以选择相对定位而不是其它定位）
            再设置叠放次序更高
拓展
    border-collapse: collapse;
    这是表格单元格边框合并的，不适用于非单元格以外的标签！
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    li {
        list-style: none;
    }
    .box {
        width: 560px;
        margin: 50px auto;
    }
    ul li {
        float: left;
        width: 100px;
        height: 100px;
        background-color: cyan;
        border: 10px solid red;
        border-left-color: green;
        border-right-color: blue;
        /* 设置负值 */
        margin-left: -10px;
    }
    ul li:hover {
        position: relative;
        z-index: 999;
        border: 10px solid black;
    }
</style>

<div class="box">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>